<template>
  <div class="footer">
    <div class="footerBody">
      <div class="nationBox">
        <NuxtImg src="/images/home/footer/footer_2.png" class="nationBoxImg1" />
        <div class="logo_box">
          <NuxtImg src="/images/home/head/logo-01.png" class="logo" />
          <div class="anjoan" style="display: none">
            <div id="anj-44cd28f9-9d78-470d-b910-456f91387405"></div>
          </div>
        </div>
        <p class="logoFont">
          <span>{{ lang.game_address }}</span> {{ lang.game_address_tip }}
        </p>
        <CustoCard customClass="home-footer" />
        <div class="imgList"></div>
        <div class="line"></div>
        <NuxtImg src="/images/home/footer/footer_3.png" class="Manufacturer" />
        <div class="line"></div>
        <NuxtImg src="/images/home/footer/footer_4.png" class="Manufacturer" />
      </div>
      <div class="bottom">
        <p>{{ lang.footer_tip_1 }}</p>
        <p>{{ lang.footer_tip_2 }}</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const lang: any = getCurrentPageLang("home");
</script>

<style scoped lang="scss">
.footer {
  width: 100%;
  position: relative;
  padding: 0 0rem 1rem;
}
.footer .footerBody {
  width: 100%;
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 2rem;
}
.footer .footerBody .nationBox {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  overflow: hidden;
  color: var(--theme-neutral1);
  padding: 0.6rem 0.5rem;
  box-sizing: border-box;
}
.footer .footerBody .nationBox .nationBoxImg1 {
  width: 100%;
}
.footer .footerBody .nationBox .logo_box {
  display: flex;
  align-items: center;
}
.footer .footerBody .nationBox .logo {
  height: 1.06rem;
}
.anjoan {
  display: none;
  margin-left: 0.3rem;
}
.footer .footerBody .nationBox .logoFont {
  font-size: 0.38rem;
  color: var(--theme-neutral1);
  text-align: center;
}
.footer .footerBody .nationBox .logoFont span {
  color: var(--theme-dec4);
}

.footer .footerBody .nationBox .imgList {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
}
.footer .footerBody .nationBox .line {
  width: 100%;
  height: 0.04rem;
  background: var(--theme-color7);
}
.footer .footerBody .nationBox .Manufacturer {
  width: 100%;
}
.footer .footerBody .nationBox .line {
  width: 100%;
  height: 0.04rem;
  background: var(--theme-color7);
}
.footer .footerBody .nationBox .Manufacturer {
  width: 100%;
}
.footer .footerBody .bottom {
  width: 100%;
  padding-top: 0.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 1.42rem;
  gap: 0.5rem;
  color: var(--theme-neutral1);
}
.footer .footerBody .bottom p {
  padding: 0 0.36rem;
  box-sizing: border-box;
  font-size: 0.31rem;
  text-align: center;
  opacity: 0.3;
}
</style>
